<template>
    <!-- 
        页面以 QS （勤瘦） 为主命名
        每个页面再根据页面内容，添加不同命名后续 （如登录页 - loading）
        页面内命名都以本页面主题为开头，加功能后缀 如：loading-confirm-btn
        本页面主题:control
     -->
    <div class="QS-content-template QS-control">
        <!-- 操作台 -->
        <div class="control_tab">
            <div class="control_icon">
                <img src="../assets/image/icon.png" alt="">
                <p>勤瘦小程序</p>
            </div>
            <div class="control_console">
                <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo control_console_menu"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#133259"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                >
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>选项一</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item @click="clickTest()" index="1-1">通用页面</el-menu-item>
                            <el-menu-item @click="clickTest01()" index="1-2">测试页面01</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>选项二</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item @click="clickTest02()" index="2-1">测试页面02</el-menu-item>
                            <el-menu-item @click="clickTest03()" index="2-2">测试页面03</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>选项三</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item @click="clickTest04()" index="3-1">测试页面04</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </div>
        </div>
        <!-- 内容部分 -->
        <div class="control_cont">
            <div class="control_userInfo">
                <img src="../assets/image/userPic.png" alt="" class="control_userPic">
                <p class="control_userName">
                    勤瘦
                </p>
            </div>
            <div class="control_view">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script>

export default {
	components: {
	
	},
	data(){
		return {
		}
    },
    mounted(){
        
    },
    methods:{
        // this.$router.push('/GDPLHasReturned');
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        clickTest(){
            this.$router.push('/QSElement');
        },
        clickTest01(){
            this.$router.push('/elementTest01');
        },
        clickTest02(){
            this.$router.push('/elementTest02');
        },
        clickTest03(){
            this.$router.push('/elementTest03');
        },
        clickTest04(){
            this.$router.push('/elementTest04');
        },
    }
}
</script>